<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
.wrap{
    width: 500px;
    height: 357px;
    margin: 100px auto 0;
    position: relative;
}
.content{
    width: 500px;
    height: 357px;
    overflow: auto;
    /* overflow: hidden; */
}
.content .box{
    width: 10000px;
    height: 340px;
    overflow: hidden;
}
.content .box img{
    float: left;
    width: 500px;
    height: 340px;
}
.prev{
    width: 25px;
    height: 24px;
    background-image: url('./imgs/fx1.png');
    cursor: pointer;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -12px;
}
.next{
    width: 25px;
    height: 24px;
    background-image: url('./imgs/fx2.png');
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -12px;
}
.pages{
    width: 300px;
    height: 22px;
    position: absolute;
    left: 50%;
    bottom: 22px;
    margin-left: -150px;
    /* background-color: #ccc; */
    text-align: center;
}
.pages li{
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    background-color: lightblue;
}
.pages li.active{
    color: azure;
    background-color: lightpink;
}
</style>
</head>
<body>
    
<div class="wrap">
    <div class="content">
        <div class="box">
            <img src="./imgs/c1.jpg" alt="">
            <img src="./imgs/c2.jpg" alt="">
            <img src="./imgs/c3.jpg" alt="">
            <img src="./imgs/c4.jpg" alt="">
            <!-- <img src="./imgs/c1.jpg" alt=""> -->
        </div>
    </div>
    <p class="prev"></p>
    <p class="next"></p>
    <ul class="pages">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>1
        <li>4</li>
    </ul>
</div>

<script src="./utils.js"></script>
<script>
// 获取元素
var content = $('.content');
var box = $('.box');
var imgs = $('.box img');// 此时长度为4
var prev = $('.prev');
var next = $('.next');
var lis = $('.pages li');

var timer = null;// 计时器id
var imgIndex = 0;// 当前显示图片的索引
var numIndex = 0;// 当前显示页码的索引
var imgw = imgs[0].clientWidth;// 一张图片的宽度

// 克隆第一张图片放在最后
box.appendChild(imgs[0].cloneNode(true));

// 进入页码自动播放
autoPlay();

// 自动播放
function autoPlay(){
    // 每隔3秒播放下一张图片
    timer = setInterval(function (){
        moveNext();//播放下一张图片
    },3000);
}

// 播放下一张图片
function moveNext(){
    // 当前显示图片的索引递增
    imgIndex++;
    // 临界值判断
    if (imgIndex > imgs.length) {
        // 最后一张的下一张是第二张
        imgIndex = 1;
        // 容器的滚动条归0
        content.scrollLeft = 0;
    }
    animate(content,'scrollLeft',imgIndex*imgw);

    lis[numIndex].className = '';
    numIndex++;
    if (numIndex >= lis.length) {
        numIndex = 0;
    }
    lis[numIndex].className = 'active';
}

// 播放上一张图片
function movePrev(){
    // 当前显示图片的索引递减
    imgIndex--;
    // 临界值判断
    if (imgIndex < 0) {
        // 第一张的上一张是倒数第二张
        imgIndex = imgs.length-1;
        // 容器的滚动条回到最后一张的位置
        content.scrollLeft = imgs.length*imgw;
    }
    animate(content,'scrollLeft',imgIndex*imgw);

    lis[numIndex].className = '';
    numIndex--;
    if (numIndex < 0) {
        numIndex = lis.length-1;
    }
    lis[numIndex].className = 'active';
}

// 点击播放上一张
prev.onclick = function (){
    // 停止自动播放
    clearInterval(timer);
    // 播放上一张
    movePrev();
    // 启动自动播放
    autoPlay();
}
// 点击播放下一张
next.onclick = function (){
    // 停止自动播放
    clearInterval(timer);
    // 播放下一张
    moveNext();
    // 启动自动播放
    autoPlay();
}

// 点击 页码 切换图片


</script>
</body>
</html>